<template>
    <div class="ejectP">
           <u-navbar :is-back="true" title="弹出设备" back-text='' >
      <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<!-- <div>
                <img @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </div> -->
			</view>
      </u-navbar>

      <div>
        <img  style="width:100%" src="../../style/image/Sequiptment/bane.png" alt="">
      </div>

      <div>
            <div style="font-size: 0.89rem;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
text-align: center;
margin: 0.5rem;" >U600底座</div>
            <div style="font-size: 0.89rem;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
text-align: center;
margin: 0.5rem;" >SN号：7876787</div>
      </div>


      <div class="selectPositionC">
            <div style="
font-size: 0.89rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin: 1rem 0.5rem;" >充电宝槽位(从左至右)</div>

            <div class="euqiptmentListP" >
            <div class="euqiptmentList" v-for="(item,index) in euqiptmentLists " @click="selectM(item)" >
                     <div class="euqiptmentList-child" 
                     :style="{ 
                     color:selectId==index?'white':'black' 
                     ,backgroundColor:selectId==index?'#02af74':'white'
                     ,border:selectId==index?'1px solid #02af74':'1px solid #666666' }" >
                        <div style="font-size: 1rem;" >{{item.id}}</div>
                     </div>
            </div>
            </div>
      
      </div>



          <div class="footP" >
            <div  @click="addPosM" style="padding: 0.7rem;
display: flex;align-items: center;" >
                <img style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt="">
                <div  style="color: white;
margin-left: 0.2rem;">弹出</div>
            </div>

    </div>

        
    </div>
    </div>
</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'


 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
    })


    export default class extends Vue {
 
     @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        }) msg!:string;

        selectId=999
         public euqiptmentLists=[
              {
                status:true,
                id:1
                },
                {
                status:true,
                id:2
                },
                {
                status:true,
                id:3
                },
                {
                status:true,
                id:4
                },{
                status:true,
                id:5
                },{
                status:true,
                id:6
                }
          ]

       
         created() {
          }

          mounted() {
              //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

                
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
          }

          selectM(data:any){

                console.log(data.id)

                this.selectId=data.id-1
          }



    }
</script>

<style  scoped>


.footP{

position: absolute;
bottom: 0;
background-color: #02af74;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.euqiptmentListP{

 display: flex;
 flex-wrap: wrap;
}

.euqiptmentList{

width: 33.3%;
text-align: center;
}
.euqiptmentList-child{
padding: 0.6rem 1rem;
margin: 0.5rem;
border: 1px solid #666666;
border-radius: 0.2rem;
}


</style>